<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:type="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8">
    <title>个人资料</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" th:href="@{/resources/layui/css/layui.css}" media="all" />
    <link rel="stylesheet" th:href="@{/resources/css/public.css}" media="all" />
</head>
<body class="childrenBody">
<form class="layui-form layui-row" method="post">
    <input type="hidden" name="id" th:value="${session.user.id}">
    <div class="layui-col-md3 layui-col-xs12 user_right">
        <div class="layui-upload-list userFace">
            <input type="hidden" name="imgPath" id="imgPath" th:value="${session.user.imgPath}">
            <img th:src="@{'/' + ${session.user.imgPath}}" class="layui-upload-img layui-circle userFaceBtn userAvatar" id="userFace">
        </div>
        <button type="button" class="layui-btn layui-btn-primary userFaceBtn"><i class="layui-icon">&#xe67c;</i> 掐指一算，我要换一个头像了</button>
    </div>
    <div class="layui-col-md6 layui-col-xs12">
        <div class="layui-form-item">
            <label class="layui-form-label">用户名</label>
            <div class="layui-input-block">
                <input type="text" value="" name="name" th:value="${session.user.name}" disabled class="layui-input layui-disabled">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">登陆名</label>
            <div class="layui-input-block">
                <input type="text" value="" name="loginName" th:value="${session.user.loginName}" required class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">住址</label>
            <div class="layui-input-block">
                <input type="text" value="" name="address" th:value="${session.user.address}" required class="layui-input">
            </div>
        </div>


        <div class="layui-form-item">
            <label class="layui-form-label">联系方式</label>
            <div class="layui-input-block">
                <input type="text" value="" name="phone" th:value="${session.user.phone}" required class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">所属部门</label>
            <div class="layui-input-block">
                <input type="text" value="" name="deptName" th:value="${session.user.deptName}" disabled class="layui-input layui-disabled">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">雇佣时间</label>
            <div class="layui-input-block">
                <input type="text" name="hireDate" th:value="${#temporals.format(session.user.hireDate, 'yyyy-MM-dd HH:mm:ss', #locale)}" disabled class="layui-input layui-disabled">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">用户备注</label>
            <div class="layui-input-block">
                <input type="text" th:value="${session.user.remark}" name="remark" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit="" lay-filter="changeUser">立即提交</button>
                <!--<button type="reset" class="layui-btn layui-btn-primary">重置</button>-->
            </div>
        </div>
    </div>
</form>
<script type="text/javascript" th:src="@{/resources/layui/layui.js}"></script>

<script type="text/javascript">
    var ctx = [[@{/}]];
    layui.use(['jquery','upload','form'],function () {

        var $ = layui.jquery;
        var upload = layui.upload;
        var form = layui.form;

        //上传头像
        upload.render({
            elem: '.userFaceBtn',
            url: ctx + 'user/uploadFile',
            acceptMime: 'image/*',
            method : "post",
            done: function(res, index, upload){
                if (res.code != 0){
                    alert(res.msg);
                    return;
                } else {
                    var path = res.msg;
                    $('#userFace').attr('src', ctx + 'images/' + path);
                    $('.userFace').css("background","#fff");
                    //给隐藏域赋值
                    $("#imgPath").val(ctx + 'images/' + path);
                }

            }
        });

        //提交个人资料
        form.on("submit(changeUser)",function(data){
            var index = layer.msg('提交中，请稍候',{icon: 16,time:false,shade:0.8});
            $.post(ctx + "/user/updateUser", data.field, function (res) {
                if (res.code == 0)
                    layer.msg("修改成功，重新登陆后生效！");
                else
                    layer.msg(res.msg);
            });
            setTimeout(function(){
                layer.close(index);
            },2000);
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        })
    });


</script>

</body>
</html>